import { Button, Flex, Input, message } from "antd";
import { useContext, useState } from "react";
import { CloseOutlined } from "@ant-design/icons";
import { MyContext } from "../../../../../store";

export default (props: { isCall: boolean }) => {
  const { sipContext } = useContext(MyContext);
  const [phone, setPhone] = useState("");
  const [loading, setLoading] = useState(false);

  function handleCall() {
    if (!props.isCall) {
      return message.warning("请先结束通话后拨打");
    }
    sipContext?.sipClient?.call(phone);
    setLoading(true);
  }

  return <Flex align={"center"} vertical={true} className={"w-450"}>
    <Flex className={"my-10"}>
      <Input size={"large"}
             className={"text-center text-2xl"}
             onChange={(e => setPhone(e.target.value))}
             placeholder="请输入外呼号码"
             variant="borderless"
             value={phone}
      />
      <CloseOutlined className={"cursor-pointer text-blue-500"} onClick={() => setPhone("")} />
    </Flex>

    <Button type={"primary"} disabled={!phone} shape={"round"} loading={loading}
            onClick={() => handleCall()}> 拨打电话</Button>
  </Flex>;
}
